import React, { useState } from 'react';
import { 
  Input, 
  Button, 
  Card, 
  Spin, 
  List, 
  Typography, 
  Space, 
  Divider, 
  Alert,
  Tag
} from 'antd';
import { 
  SendOutlined, 
  RocketOutlined, 
  CheckOutlined, 
  InfoCircleOutlined 
} from '@ant-design/icons';

const { TextArea } = Input;
const { Text, Paragraph } = Typography;

/**
 * 聊天输入组件
 * 包含消息输入框、优化按钮和优化建议列表
 */
const ChatInput = ({ 
  onSend, 
  onOptimize, 
  suggestions = [], 
  loading = false, 
  optimizeLoading = false,
  relationshipType,
  chatGoal
}) => {
  const [messageText, setMessageText] = useState('');
  
  // 处理发送消息
  const handleSend = () => {
    if (!messageText.trim()) return;
    onSend(messageText);
    setMessageText('');
  };
  
  // 处理优化请求
  const handleOptimize = () => {
    if (!messageText.trim()) return;
    onOptimize(messageText);
  };
  
  // 应用建议
  const applySuggestion = (suggestion) => {
    setMessageText(suggestion.content);
  };
  
  // 检查优化按钮是否可用
  const canOptimize = messageText.trim() && relationshipType && chatGoal;
  
  // 按下Enter键发送消息，按下Shift+Enter换行
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="chat-input-container">
      {!relationshipType || !chatGoal ? (
        <Alert
          message="提示"
          description="请先设置联系人关系和聊天目标，以获得更好的优化建议。"
          type="info"
          showIcon
          style={{ marginBottom: 16 }}
        />
      ) : null}
      
      {/* 输入区域 */}
      <Card bordered={false} className="chat-input-card">
        <TextArea
          value={messageText}
          onChange={(e) => setMessageText(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="输入消息..."
          autoSize={{ minRows: 2, maxRows: 6 }}
          disabled={loading}
        />
        
        <div className="chat-input-actions">
          <Space>
            <Button 
              type="primary" 
              icon={<SendOutlined />} 
              onClick={handleSend}
              disabled={!messageText.trim() || loading}
            >
              发送
            </Button>
            <Button
              type="default"
              icon={<RocketOutlined />}
              onClick={handleOptimize}
              disabled={!canOptimize || optimizeLoading}
              loading={optimizeLoading}
            >
              优化表达
            </Button>
          </Space>
          
          <div className="chat-input-info">
            <Text type="secondary">
              {messageText.length} 字
              {relationshipType && <Tag color="blue" style={{ marginLeft: 8 }}>{relationshipType}</Tag>}
              {chatGoal && <Tag color="green">{chatGoal}</Tag>}
            </Text>
          </div>
        </div>
      </Card>
      
      {/* 优化建议列表 */}
      {optimizeLoading ? (
        <div className="suggestions-loading">
          <Spin tip="正在生成优化建议..." />
        </div>
      ) : suggestions.length > 0 ? (
        <Card 
          title={
            <div>
              <RocketOutlined /> 优化建议
              <Text type="secondary" style={{ marginLeft: 8, fontSize: 14 }}>
                根据你的关系和聊天目标生成的建议
              </Text>
            </div>
          }
          className="suggestions-card"
        >
          <List
            itemLayout="vertical"
            dataSource={suggestions}
            renderItem={item => (
              <List.Item
                actions={[
                  <Button 
                    type="primary" 
                    size="small" 
                    icon={<CheckOutlined />} 
                    onClick={() => applySuggestion(item)}
                  >
                    应用
                  </Button>
                ]}
              >
                <div className="suggestion-item">
                  <Paragraph>{item.content}</Paragraph>
                  <Text type="secondary">
                    <InfoCircleOutlined /> {item.explanation}
                  </Text>
                </div>
              </List.Item>
            )}
          />
        </Card>
      ) : null}
    </div>
  );
};

export default ChatInput; 